<template>
  <div id="GenderSpread">
    <div class="GenderSpread-box">
      <div class="box-left-img" v-if="pieBoyData != 0">
        <!-- <img src="@/assets/shi/boy.png" alt /> -->
          <img src="@/assets/two/boy.png" alt />
      </div>
      <div class="box-wrap">
        <!-- 进度条 -->
        <div class="box-wrap-top">
          <!-- 左边进度条 -->
          <div class="top-left" :style="{ width: leftWidth }"></div>
          <!-- 右边进度条 -->
          <div class="top-right" :style="{ width: rightWidth }"></div>
        </div>
        <!-- 百分比 -->
        <div class="box-wrap-bottom">
          <div v-if="pieBoyData == 0"></div>
          <div
            class="bottom-left"
            v-if="pieBoyData != 0"
          >{{ "男性" + pieBoyData + "%" }}</div>
          <div
            class="bottom-right"
            v-if="pieGirlData != 0"
          >{{ "女性" + pieGirlData + "%" }}</div>
          <div v-if="pieGirlData == 0"></div>
        </div>
      </div>
      <div class="box-right-img" v-if="pieGirlData != 0">
        <!-- <img src="@/assets/shi/girl.png" alt /> -->
         <img src="@/assets/two/girl.png" alt />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    pieData: Array | Object,
    name: String
  },
  data() {
    return {
      colorList: [],
      leftWidth: '10%',
      rightWidth: '90%',
      pieBoyData: 0,
      pieGirlData: 0,
      dataArr: []
    };
  },
  computed: {
    // pieDataValue() {
    //   let arr = this.pieData.map(function (item) {
    //     return item.value;
    //   });
    //   let arrValue = this.scaleValue(arr);
    //   this.leftWidth = arrValue[0] + '%'
    //   this.rightWidth = arrValue[1] + '%'
    //   return arrValue
    // },
    // pieDataName() {
    //   let arr = this.pieData.map(function (item) {
    //     return item.name;
    //   });
    //   return arr;
    // },
  },
  watch: {
    pieData: function (newVal, oldVal) {
      this.isPropsData();
    }
  },
  created() {
    // this.dataArr = this.pieData;
    this.isPropsData();
  },
  mounted() {
    this.drawTalentPie();
  },

  methods: {
    isPropsData() {
      if(this.pieData.length && !this.pieData[0].value && !this.pieData[1].value){
        return;
      }
      if (this.pieData.length == 2) {
        let arr = this.pieData.map(function(item) {
          return item.value;
        });
        let sumValue = arr[0]+arr[1];
        // this.leftWidth = arrValue[1] + "%";
        // this.rightWidth = arrValue[0] + "%";
        // this.pieBoyData = arrValue[1];
        // this.pieGirlData = arrValue[0];

        for(let i=0;i<this.pieData.length;i++){
          let item = this.pieData[i];
          let percentage = this.scaleValue(item.value,sumValue);
          if(item.name=='男性'){
            this.leftWidth = percentage+ "%";
            this.pieBoyData = percentage;
          }else{
            this.rightWidth = percentage + "%";
            this.pieGirlData = percentage ;
          }
        }
      } else if (this.pieData.length == 1) {
        //  let arr = this.pieData.map(function (item) {
        //   return item.value;
        // });
        if (this.pieData[0].name == "男性") {
          // this.pieBoyData = this.pieData[0].value
          this.pieBoyData = 100;
          this.leftWidth = 100 + "%";
          this.rightWidth = 0 + "%";
        } else {
          // this.pieGirlData = this.pieData[0].value
          this.pieGirlData = 100;
          this.leftWidth = 0 + "%";
          this.rightWidth = 100 + "%";
        }
      }
    },
    drawTalentPie() {},
    // js 计算百分比的方法
    scaleValue(itemValue,sumValue) {
      var k = ((itemValue / sumValue) * 100).toFixed(2);
      return k;
    }
  }
};
</script>
<style lang="less" scoped>
#GenderSpread {
  width: 100%;
  height: 100%;
  // margin-top: 36px;
  .GenderSpread-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    clear: both;
    display: flex;
    justify-content: center;
    align-items: center;
    .box-left-img {
      width: 24px;
      height: 48px;
      margin-right: 11px;
      img {
        width: 24px;
        height: 24px;
      }
    }
    .box-right-img {
      width: 24px;
      height: 48px;
      margin-left: 11px;
      img {
        width: 24px;
        height: 24px;
      }
    }
    .box-wrap {
      width: 60%;
      height: 44px;
      .box-wrap-top {
        width: 100%;
        height: 12px;
        display: flex;
        background-color: #f3ac62;
        border-radius: 100px;
        .top-left {
          width: 10%;
          height: 100%;
          border-radius: 100px;
          // background-color: #1779ff;
          background-color: #6aa9ff;
        }
        .top-right {
          width: 90%;
          height: 100%;
          border-radius: 0 100px 100px 0;
          // background-color: #fd7f2c;
          background-color: #f3ac62;
        }
      }
      .border_radius {
        border-radius: 100px;
      }
      .box-wrap-bottom {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 6px;
        .bottom-left {
          font-size: 14px;
          font-weight: 500;
          color: #6aa9ff;
        }
        .bottom-right {
          font-size: 14px;
          font-weight: 500;
          color: #f3ac62;
        }
      }
    }
  }
}
</style>
